<template>
	<view>
		<view class="product-card" >
			<!-- 商品图片 -->
			<view class="product-img-container">
				<image :src="product.images[0].url" mode="aspectFill" class="product-img" :alt="product.productName" @click.stop="navigateToDetail(product)"></image>
				<view class="product-tag" v-if="product.tag">
					<text class="tag-text">{{ product.tag }}</text>
				</view>
				<view class="type-lable" :style="{backgroundColor:product.onShop?'#00aa00':'#ffaa00'}">
					<text >{{product.onShop?'已认证':'自营'}}</text>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<view class="product-name">
					<text class="name">{{ product.productName }}</text>
					<text class="specs">{{ product.specs }}</text>
				</view>
				<view class="description-warp">
					<text class="description">{{ product.description }}</text>
				</view>
				<!-- 修复价格 toFixed 潜在报错：先转数字 -->
				<view class="price-box">
					<text class="product-price">¥{{ Number(product.price).toFixed(2) }}</text>
					<text class="product-originalPrice" v-if="product.originalPrice > 0">¥{{ Number(product.originalPrice) }}</text>
					<view class="quantity-container">
						<view class="left-buttons">
							<button v-if="getQuantity(product._id) > 0" class="quantity-btn minus" @touchend.prevent="changeQuantity(product, -1)">-</button>
							<text v-if="getQuantity(product._id) > 0" class="quantity">
								{{ getQuantity(product._id) }}
							</text>
						</view>
						<button class="quantity-btn plus" @touchend.prevent="changeQuantity(product, 1)">+</button>
					</view>
				</view>

				<view class="product-seller">
					<image :src="product.userInfo.nicPic.url" mode="aspectFill" class="seller-avatar"></image>
					<text class="seller-name">{{ product.userInfo.nicName }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	props:{
		product:{
			type:Object,
			default:()=>{}
		}
	},
	data() {
		return {};
	},
	mounted() {

	},
	methods: {

		getQuantity(productId) {
			const items = this.$store?.state?.cart?.items || [];
			const item = items.find((item) => item._id === productId);
			return item?.quantity || 0;
		},
		changeQuantity(item, delta) {
			uni.vibrateShort({});
			const currentQty = this.getQuantity(item._id);

			if (currentQty === 0) {
				// 新增商品到购物车
				this.$store.commit('cart/addItem', { ...item, quantity: 1 });
			} else {
				const newQty = currentQty + delta;
				if (newQty > 0) {
					// 更新数量
					this.$store.commit('cart/updateQuantity', {
						id: item._id,
						quantity: newQty
					});
				} else {
					// 移除商品
					this.$store.commit('cart/removeItem', item._id);
				}
			}
		},
		navigateToDetail(product) {
				const formated=encodeURIComponent(JSON.stringify(product)) 
				uni.navigateTo({
					url: `/pages/goodDetail/goodDetail?product=${formated}`
				});
			},
	}
};
</script>

<style lang="scss" scoped>
	.product-grid {
		   width: calc(50% - 10rpx); /* 50%宽度 - 10rpx（间距的一半），确保总宽度不溢出 */
		  display: flex;
		  flex-direction: column;
		  gap: 25rpx; /* 列内商家卡片的上下间距 */
	}
	
	.product-card {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	
		&:active {
			transform: scale(0.98);
		}
	}
	
	.product-img-container {
		position: relative;
		width: 100%;
		height: 360rpx;
		overflow: hidden;
	}
	
	.product-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	
		.product-card:active & {
			transform: scale(1.05);
		}
	}
	
	.product-tag {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		background-color: #ff3d00;
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}
	.type-lable{
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1000;
		width: 60rpx;
		height: 30rpx;
		color: #fff;
		font-size: 26rpx;
		padding: 2rpx;
	}
	.product-info {
		display: flex;
		flex-direction: column;
		padding: 16rpx;
	}
	
	.product-name {
	  display: flex; /* 改为 flex 实现横向排列 */
	  align-items: center; /* 垂直居中对齐 */
	  gap: 12rpx; /* 商品名和规格之间的横向间距 */
	  margin-bottom: 10rpx; /* 与下方描述区域的垂直间距 */
	  width: 100%;
	  overflow: hidden; /* 防止内容溢出容器 */
	
	  .name {
	    font-size: 28rpx;
	    color: #333;
	    font-weight: bold;
	    line-height: 1.4; /* 优化文字行高，避免拥挤 */
	    /* 限制商品名最多1行，溢出省略 */
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    flex: 1; /* 让商品名占据剩余空间，优先显示商品名 */
	  }
	  .specs {
	    color: #999;
	    font-size: 24rpx;
	    line-height: 1.4;
	    /* 限制规格最多1行，溢出省略 */
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    min-width: 0; /* 解决 flex 子元素溢出问题 */
	  }
	  }
	  .description-warp{
		 margin-bottom: 16rpx; /* 与下方价格区域的垂直间距，避免挤压 */
		  width: 100%;  
	  }
	.description {
	 font-size: 24rpx;
	  color: #999;
	  line-height: 1.5; /* 优化行高，提升可读性 */
	  /* 限制最多2行，溢出时显示省略号（避免文本过长挤压布局） */
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	}
	.price-box {
		display: flex;
		align-items: center;
		position: relative;
		gap: 15rpx;
		padding: 10rpx 0;
	}
	.product-price {
		font-size: 30rpx;
		color: #ff3d00;
		font-weight: bold;
		margin-bottom: 12rpx;
		display: block;
	}
	.product-originalPrice {
		font-size: 24rpx;
		color: #999; // 通常用灰色弱化原价
		text-decoration: line-through; // 核心：添加删除线
		text-decoration-color: #999;
	
	}
	.product-seller {
		display: flex;
		align-items: center;
	}
	
	.seller-avatar {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 8rpx;
		object-fit: cover;
	}
	
	.seller-name {
		font-size: 24rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.quantity-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		margin-left: 10rpx;
		position: absolute;
		bottom: 20rpx;
		background-color: #fff;
		right: 0rpx;
		z-index: 9;
		.left-buttons {
			display: flex;
			align-items: center;
			gap: 8rpx; /* 减号和数量文本的间距 */
		}
		.quantity-btn {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 36rpx;
			font-weight: bolder;
			padding: 0;
			line-height: 1; /* 修复按钮文字居中 */
		}
		.plus {
			background-color: #e64340;
		}
		
		.minus {
			background-color: #f5f5f5;
			color: #666;
			border: 2rpx solid #e64340; 
		}
		.quantity {
			font-size: 26rpx;
			color: #333;
			width: 40rpx;
			text-align: center;
		}
	}
	
	
	
</style>
